<template>
  <!--个人信息-->
  <view class="wrapper-greys p-12">
    <u-form
      :model="form"
      :rules="rules"
      ref="uForm"
      label-width="220rpx"
      :labelStyle="labelStyle"
      label-position="top"
    >
      <view class="flex items-center pb-12">
        <button
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
          class="avatar rela u-reset-button px-8"
        >
          <view class="flex-col items-center">
            <u-avatar size="140rpx" :src="form.avatar"></u-avatar>
            <view class="text-12 mt-4 chooseAvatarBtn">更换头像</view>
          </view>
        </button>
      </view>
      <!-- <view class="bg-whites border-radius-md px-12 py-5 mb-12">
				<u-form-item label="远方好物推荐官" borderBottom>
					<u-input placeholder="请填写您的手机号" v-model="form.phone" :border="false" fontSize="28rpx" type="number"
						maxlength="11"></u-input>
				</u-form-item>
			</view> -->
      <view class="bg-whites border-radius-md px-12 py-5 mb-12">
        <u-form-item label="会员名称" borderBottom prop="nickname" required>
          <u-input
            placeholder="请输入会员名称"
            v-model="form.nickname"
            :border="false"
            fontSize="28rpx"
          ></u-input>
        </u-form-item>
      </view>
      <!-- <view class="bg-whites border-radius-md px-12 py-5 mb-12">
				<u-form-item label="微信号" borderBottom>
					<u-input placeholder="请填写" v-model="form.phone" :border="false" fontSize="28rpx"></u-input>
				</u-form-item>
			</view> -->
    </u-form>
    <u-tabbar zIndex="99" :border="false">
      <view class="py-6 px-20 flex row-center flex-1">
        <u-button
          text="开通会员"
          type="primary"
          shape="circle"
          @click="openMembership"
          :loading="loading"
          :customStyle="{ width: '670rpx', height: '80rpx', fontSize: '24rpx' }"
        ></u-button>
      </view>
    </u-tabbar>
  </view>
</template>

<script>
import { PAY_ID, getAppId, onReadyFormRule, showToast } from "@/utils";
import {
  fetchCustomerInfo,
  fetchUniflyOrderCreateAndPay,
  uploadFile,
} from "@/services/api";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      content: "手打",
      writeOffShow: false,
      form: {
        avatar: "",
        username: "",
        sex: 0,
        description: "",
        merchantName: "",
        type: "",
        contactAddress: "",
        nickname: "",
        phone: "",
        post: "",
        email: "",
      },
      rules: {
        nickname: {
          type: "string",
          required: true,
          message: "请输入会员名称",
          trigger: ["blur", "change"],
        },
      },
      labelStyle: {
        fontSize: "28rpx",
        color: "#666",
      },
      inputStyle: {
        fontSize: "28rpx",
        color: "#333",
      },
      loading: false,
    };
  },
  methods: {
    ...mapMutations("user", {
      setCustomerInfo: "setCustomerInfo",
    }),
    async getUserInfo() {
      const { data, error } = await fetchCustomerInfo({
        customerNo: this.customerInfo.customerNo,
      });
      if (!error) {
        console.log("获取用户信息成功", data);
        this.setCustomerInfo(data);
      }
    },
    async openMembership() {
      console.log(this.form);
      await this.$refs.uForm.validate();
      if (!this.form.avatar) {
        showToast("请上传头像");
        return;
      }
      // const appId = getAppId();
      this.loading = true;
      try {
        let param = {
          appId: PAY_ID,
          type: 6,
          nickname: this.form.nickname,
          avatar: this.form.avatar,
          payAmount: 0.01,
          discountAmount: 0,
          payWay: "wxPay",
          source: "miniapp",
          remark: "会员购买订单1",
          extendJson: JSON.stringify({
            nickname: this.form.nickname,
            avatar: this.form.avatar,
            merchantNo: this.customerInfo.merchantNo,
            storeNo: this.customerInfo.storeNo,
          }),
        };
        const { data, error } = await fetchUniflyOrderCreateAndPay({
          ...param,
        });
        if (!error) {
          const that = this;
          uni.requestPayment({
            provider: "wxPay",
            timeStamp: data.timeStamp,
            nonceStr: data.nonceStr,
            package: data.packageValue,
            signType: data.signType,
            paySign: data.paySign,
            ...data,
            success: async function (res) {
              console.log("success", res);
              showToast("支付成功", "success");
              await that.getUserInfo();
              setTimeout(() => {
                that.$Router.replace({ name: "applyEntry" });
              }, 1000);
            },
            fail: function (res) {
              console.log("fail", res);
              showToast("支付失败！请重试", "fail");
            },
          });
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    async onChooseAvatar(e) {
      console.log("上传的数据是", e);
      // #ifdef MP-WEIXIN
      uploadFile({
        name: "file",
        filePath: e.target.avatarUrl,
        header: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        console.log("上传头像成功", res.data.url);
        this.form.avatar = res.data.url;
      });
      // #endif
    },
  },
  computed: {
    ...mapGetters("user", { customerInfo: "getCustomerInfo" }),
  },
  onLoad() {},
  onReady() {
    onReadyFormRule(this, "uForm", "rules");
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>
<style lang="scss" scoped>
.wrapper-greys {
  .chooseAvatarBtn {
    background: $u-primary;
    color: #fff;
    width: fit-content;
    padding: 4rpx 8rpx;
    border-radius: 8rpx;
  }

  .avatar {
    margin: 0 auto;
    overflow: visible;

    .upload {
      right: -6rpx;
      bottom: 0;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      background: -webkit-linear-gradient(136deg, #ff786b, #fa2c19);
    }
  }

  .textarea {
    width: 654rpx;
    height: 200rpx;
  }

  ::v-deep .placeholder-class {
    color: #c0c4cc;
  }

  ::v-deep .u-textarea {
    padding: 30rpx 0;

    .u-textarea__field {
      font-size: 28rpx;
    }
  }
}
</style>
